Fix Ad Hoc Profiling View Rendering Issue

Overview

This PR fixes a bug where the Ad Hoc Profiling view was blocked from rendering when flamegraph data was unavailable or when the api/metrics/nodes_cores/summary endpoint failed. The fix ensures the Ad Hoc view is always accessible since it operates independently from continuous flamegraph data.

Problem Statement

The Ad Hoc Profiling view was experiencing the following issues:

1. Blocked Rendering: The view was not displayed when flamegraph data was empty (isFGEmpty = true), even though Ad Hoc profiling has its own data source
2. Incorrect Empty State: Users saw "No data was found for the selected timeframe" instead of the Ad Hoc view with its appropriate message ("No adhoc flamegraphs found for the selected service and time range")
3. Dependency on Unrelated Data: The view rendering was incorrectly dependent on the nodes_cores/summary API endpoint, which is unrelated to Ad Hoc profiling
4. State Pollution: Switching to Ad Hoc view would set isFGEmpty = true (due to no flamegraph data), then switching back to Flamegraph view would show the wrong empty state message

Root Cause Analysis

The rendering logic had multiple blocking layers:

1. ProfilesWrapper: Checked isFgDisplayed (based on flamegraph data availability) before rendering any views
2. ProfilesViewsWrapper: Checked isFgDisplayed again before rendering ProfilesViews
3. ProfilesViews: Ad Hoc view was in a ternary chain that fell through to ProfilesEmptyState when isFGEmpty = true
4. isFGEmpty Update Effect: Updated isFGEmpty state regardless of view mode, polluting state when switching views

Solution

1. Wrapper Layer Fixes

Files Modified:

• src/gprofiler/frontend/src/components/profiles/ProfilesWrapper.jsx
• src/gprofiler/frontend/src/components/profiles/ProfilesViewsWrapper.jsx

Changes:

• Added logic to check if Ad Hoc view is active
• Introduced shouldShowView / shouldDisplayView variables that evaluate to true when either:
  • Flamegraph data is available (isFgDisplayed), OR
  • Ad Hoc view is selected (viewMode === PROFILES_VIEWS.adhoc)
• This allows the Ad Hoc view to bypass flamegraph data requirements

// ProfilesWrapper.jsx
const shouldShowView = isFgDisplayed || viewMode === PROFILES_VIEWS.adhoc;

// ProfilesViewsWrapper.jsx
const isAdhocView = viewMode === PROFILES_VIEWS.adhoc;
const shouldDisplayView = isFgDisplayed || isAdhocView;

2. View Rendering Order Fix

File Modified: src/gprofiler/frontend/src/components/profiles/ProfilesViews.jsx

Changes:

• Moved Ad Hoc view check to an early return at the top of the render logic
• This ensures Ad Hoc view renders immediately when selected, before any isFGEmpty checks
• Added clear comments explaining the independence of the Ad Hoc view

// Always render adhoc view when selected, regardless of isFGEmpty state
// since adhoc view has its own empty state handling
if (viewMode === PROFILES_VIEWS.adhoc) {
    return <AdhocProfilingView />;
}

3. State Management Fix

File Modified: src/gprofiler/frontend/src/components/profiles/ProfilesViews.jsx

Changes:

• Modified the isFGEmpty update effect to only run for views that depend on flamegraph data
• Ad Hoc view is excluded from this list since it has its own data source
• This prevents state pollution when switching between views

useEffect(() => {
    // Only update isFGEmpty for views that depend on flamegraph data
    // Only adhoc view doesn't depend on flamegraph data and manages its own empty state
    const viewsDependingOnFgData = [
        PROFILES_VIEWS.flamegraph, 
        PROFILES_VIEWS.table, 
        PROFILES_VIEWS.service, 
        PROFILES_VIEWS.html
    ];
    if (viewsDependingOnFgData.includes(viewMode)) {
        if (!_.isEmpty(flameGraphData[0]) && flameGraphData[0]?.children?.length === 0) {
            setIsFGEmpty(true);
        } else {
            setIsFGEmpty(false);
        }
    }
}, [flameGraphData, setIsFGEmpty, viewMode]);

4. UI Enhancement: Collapsible File List

File Modified: src/gprofiler/frontend/src/components/profiles/views/adhoc/AdhocProfilingView.jsx

New Features:

• Made the flamegraph file list collapsible to maximize viewing area
• Added expand/collapse functionality triggered by clicking anywhere on the header
• Visual improvements:
  • Light gray background (grey.100) on the header bar
  • Hover effect (grey.200) to indicate interactivity
  • Chevron icon (down/right) showing collapse state
  • Rounded corners and proper padding
• Prevented event bubbling on the Select dropdown to avoid accidental collapse

const [isTableExpanded, setIsTableExpanded] = useState(true);

// Clickable header with collapse functionality
<Box
    sx={{
        backgroundColor: filesData && filesData.length > 0 ? 'grey.100' : 'transparent',
        cursor: filesData && filesData.length > 0 ? 'pointer' : 'default',
        '&:hover': filesData && filesData.length > 0 ? {
            backgroundColor: 'grey.200',
        } : {}
    }}
    onClick={() => filesData && filesData.length > 0 && setIsTableExpanded(!isTableExpanded)}
>
    {/* Header content */}
</Box>

<Collapse in={isTableExpanded}>
    {/* File list table */}
</Collapse>

Technical Details

View Independence Matrix

Rendering Flow After Fix

User Selects Ad Hoc View
    ↓
ProfilesWrapper: shouldShowView = true (due to adhoc mode)
    ↓
ProfilesViewsWrapper: shouldDisplayView = true (due to adhoc mode)
    ↓
ProfilesViews: Early return with <AdhocProfilingView />
    ↓
Ad Hoc view renders with its own empty state handling

Benefits

1. Always Accessible: Ad Hoc profiling view is now accessible regardless of flamegraph data availability
2. Correct Empty States: Each view shows its appropriate empty state message
3. No State Pollution: Switching between views no longer corrupts the isFGEmpty state
4. Better UX: Collapsible file list provides more space for flamegraph analysis
5. Independent Operation: Ad Hoc view operates truly independently from continuous profiling infrastructure

Testing

Test Scenarios Verified

• Ad Hoc view displays when nodes_cores/summary endpoint fails
• Ad Hoc view displays when no flamegraph data exists
• Ad Hoc view shows correct message when no files are found
• Switching from Ad Hoc to Flamegraph view shows correct empty state
• Switching from Flamegraph to Ad Hoc view works correctly
• File list collapse/expand functionality works
• Clicking dropdown doesn't trigger collapse
• Hover effects on header work as expected

Browser Testing

• ✅ Chrome
• ✅ Firefox
• ✅ Safari (expected to work based on MUI components)

Migration Notes

• No Database Changes: This is purely a frontend fix
• No API Changes: No backend modifications required
• No Breaking Changes: Existing functionality preserved
• Backward Compatible: All other views continue to work as before

Files Changed

Frontend Files

1. src/gprofiler/frontend/src/components/profiles/ProfilesWrapper.jsx

   • Added SelectorsContext and PROFILES_VIEWS imports
   • Added viewMode from context
   • Introduced shouldShowView logic for Ad Hoc bypass

2. src/gprofiler/frontend/src/components/profiles/ProfilesViewsWrapper.jsx

   • Added isAdhocView check
   • Introduced shouldDisplayView logic
   • Updated display conditions

3. src/gprofiler/frontend/src/components/profiles/ProfilesViews.jsx

   • Added early return for Ad Hoc view
   • Modified isFGEmpty effect to exclude Ad Hoc view
   • Added view dependency array with comments

4. src/gprofiler/frontend/src/components/profiles/views/adhoc/AdhocProfilingView.jsx

   • Added Collapse, Icon, and ICONS_NAMES imports
   • Added isTableExpanded state
   • Implemented collapsible table with clickable header
   • Added visual styling for interactive header
   • Prevented event bubbling on dropdown